<template>
  <div class="systemPage-wrapper">
    <catalogue-Detail
      v-if="dialogFormVisible"
      @hide="hide"
      :titleName="dialogFormTitle"
      :dialogForm="dialogForm"
      @refreshNode="refreshNode"
    ></catalogue-Detail>
    <div class="topbar">
      <span class="iconfont iconyewu_ziliaoguanli_ziliaoguanli titleIcon"></span>
      <span>资料管理</span>
    </div>
    <div class="content-background">
      <div class="left-tree content-wrapper">
        <span class="title">类别选择</span>
        <data-tree
          ref="menuTree"
          :type="1"
          :dropMenuShow="1"
          :dropMenuList="dropMenu"
          :param="param"
          @getNodeInfo="getMenuInfo"
          @menuOperations="menuOperations"
        ></data-tree>
      </div>
      <!-- <data-List ref="mychild" :fileType="fileType" :mid="id" :fieldName="fieldName" /> -->
      <div class="right-board content-wrapper">
        <data-List ref="mychild" :fileType="fileType" :fieldName="fieldName" />
      </div>
    </div>
  </div>
</template>

<script>
// import dataTree from "../../system/components/menuTree";
import dataTree from "../components/commonTree";
import catalogueDetail from "../../business/components/dataManage/catalogueDetail.vue";
import dataList from "../components/dataManage/dataList";
import { dataDetail, dataDel } from "@/business/api/dataManage";
export default {
  name: "dataManage",
  components: {
    dataTree,
    catalogueDetail,
    dataList,
  },
  data() {
    return {
      param: {
        pId: 0,
      },
      // 右键菜单
      dropMenu: [],
      catalogueShow: false,
      // 树 左击信息
      currentMenuNodeId: "",
      dialogFormVisible: false,
      dialogFormTitle: "",
      currentNodeInfo: {},
      dataForm: {},
      fileShow: false,
      fileType: "",
      //对应字段名
      fieldName: "FILENAME",
    };
  },
  mounted() {},
  methods: {
    // 刷新树
    refreshNode() {
      this.$refs.menuTree.refreshNode(this.currentNode);
    },
    // 菜单树点击
    async getMenuInfo(e) {
      if (e.clickType) {
        this.fileShow = true;
        this.$refs.mychild.search(e.id);
        this.currentMenuNodeId = e;
        this.fileType = e.name;
      } else {
        this.dropMenu = e.data.type
          ? [
              {
                index: 3,
                label: "删除",
                icon: "icon iconfont iconbiaoge-shanchu",
              },
            ]
          : [
              {
                index: 0,
                label: "新增同级",
                icon: "icon iconfont iconzengjia",
              },
              {
                index: 1,
                label: "新增下级",
                icon: "icon iconfont iconzengjia",
              },
              {
                index: 2,
                label: "编辑",
                icon: "icon iconfont iconbiaoge-bianji",
              },
              {
                index: 3,
                label: "删除",
                icon: "icon iconfont iconbiaoge-shanchu",
              },
            ];
        this.currentNode = e;
        const detail = await dataDetail({ id: e.data.id });
        this.currentNodeInfo = detail.info;
      }
    },
    // 菜单树右键菜单
    menuOperations(e) {
      // 0-新增同级 1-新增下级 2-编辑 3-删除
      this.fileShow = false;
      this.dialogFormTitle = "";
      this.dialogForm = {};
      this.operationType = e;
      switch (Number(e)) {
        case 0:
          this.dialogForm = {
            state: 1,
            parentId: this.currentNodeInfo.pid,
          };
          this.currentNode = this.currentNode.parent;
          this.currentNode.operationType = 1;
          this.dialogFormVisible = true;
          this.dialogFormTitle = "新增同级";
          break;
        case 1:
          this.currentNode.operationType = 1;
          this.dialogFormVisible = true;
          this.dialogFormTitle = "新增下级";
          this.dialogForm = {
            state: 1,
            parentId: this.currentNodeInfo.id,
          };
          break;
        case 2:
          this.currentNode.operationType = 0;
          this.dialogForm = JSON.parse(JSON.stringify(this.currentNodeInfo));
          this.dialogFormVisible = true;
          this.dialogFormTitle = "编辑";
          break;
        case 3:
          if (this.currentNodeInfo.pid === 0) {
            this.message("该节点不允许删除", 3);
            return;
          }
          this.messageBox("确认删除？").then((c) => {
            if (c.action) {
              dataDel({ id: this.currentNodeInfo.id }).then((res) => {
                if (res.success) {
                  this.currentNode.operationType = 0;
                  this.$refs.menuTree.refreshNode(this.currentNode);
                  this.message(res.msg, 1);
                } else this.message(res.msg, 3);
              });
            }
          });
          break;
      }
    },
    //关闭详情页面
    hide() {
      this.dialogFormVisible = false;
    },
  },
};
</script>

<style scoped>
.content-background {
  display: flex;
}
.dataManage-wrapper {
  overflow-y: auto;
  min-width: 1200px;
  width: 100%;
  height: calc(100% - 42px);
}
.right-board {
  flex: 1;
  width: calc(100% - 332px);
}
.title::before {
  content: "";
  display: block;
  width: 4px;
  height: 20px;
  background: #53a7ff;
  border-radius: 2px;
  position: absolute;
  top: 0;
  left: 0;
}
.left-tree {
  width: 320px;
  margin-right: 12px;
  text-align: left;
  overflow: auto;
  height: 100%;
  min-width: 320px;
}
.title {
  margin: 16px;
  text-align: left;
  display: inline-block;
  font-weight: bold;
  font-size: 16px;
  padding: 0 12px;
  position: relative;
  color: var(--organization-tabs-text-color);
}
</style>